<template>
    <n-space vertical size="large">
    <n-layout has-sider>
      
      <n-layout>
        <n-layout-header>头像框</n-layout-header>
        <n-layout-content content-style="padding: 24px;">
          我的信息
        </n-layout-content>
        <n-layout-content content-style="padding: 24px;" style="background: rgba(128, 128, 128, 0.2)" @click="handlemessage1">
          借阅中心
        </n-layout-content>
        <n-layout-footer @click="handlemessage2">消息中心</n-layout-footer>
      </n-layout>
      <n-layout-sider content-style="padding: 24px;">
        个人信息表
      </n-layout-sider>
    </n-layout>
  </n-space>
</template>
  
  <style scoped>
  .n-layout-header,
  .n-layout-footer {
    background: rgba(128, 128, 128, 0.2);
    padding: 24px;
  }
  
  .n-layout-sider {
    background: rgba(128, 128, 128, 0.3);
  }
  
  .n-layout-content {
    background: rgba(128, 128, 128, 0.4);
  }
  </style>

  <script lang="ts" setup>
    import {NSpace,NLayout,NLayoutHeader,NLayoutContent,NLayoutFooter,NLayoutSider} from 'naive-ui'
    import { useRouter } from 'vue-router';
    import { nav } from '@/router/window';
    const router = useRouter()

    function handlemessage1(){
        nav(router,'/messager1')
    }
    function handlemessage2(){
        nav(router,'/messager2')
    }
  </script>